<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">友情链接列表</h3>

        <div class="box-tools pull-right">
            <a href="javascript:;" class="btn btn-sm btn-info btn-flat pull-left" onclick="showEditModel()"><i class="fa fa-fw fa-user-plus"></i> 新增链接</a>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <div class="table-responsive">
            <table class="table no-margin">
                <thead>
                    <tr>
                        <th>排序</th>
                        <th>网站名称</th>
                        <th>logo图片</th>
                        <th>所属分类</th>
                        <th>链接类型</th>
                        <th>状态</th>
                        <th>管理操作</th>
                    </tr>
                </thead>
                <tbody>
                    {volist name="list" id="data"}
                    <tr>
                        <td width='7%'><input type='number' class='form-control list_order' data-id='{$data.id}' value='{$data.list_order}'  /></td>
                        <td>{$data.name}</td>
                        <td>{if $data['logo']}<img src='{$data.logo}' alt='{$data.name}' width='100px'>{/if}</td>
                        <td>{$linkGlass[$data['typeid']]}</td>
                        <td>{$linkType[$data['linktype']]}</td>
                        <td>{$linkStatus[$data['status']]}</td>
                        <td>
                            <a href="javascript:;" class="btn btn-link" onclick='editLink({:json_encode($data)})'>修改</a>
                            |
                            <a href="#" class="btn btn-link" onclick='confirmDelDefault("{:url("link/dellink",["id"=>$data["id"]])}", "删除操作不能恢复，请谨慎选择")'>删除</a>
                        </td>
                    </tr>
                    {/volist}
                    <tr>
                        <td width='7%'>
                            <button class="btn btn-info" onclick='setOrder("{:url('link/setOrder')}")'>排序</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- /.table-responsive -->
    </div>
    <!-- /.box-body -->
</div>


<div class="modal fade" id="linkModel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><span>编辑</span>友情链接</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="linkForm">
                    <input type="hidden"  id="linkId" name="id" value="" />
                    <div class="form-group">
                        <label for="linkTitle" class="col-sm-3 control-label">网站名称：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="linkTitle" name="name" placeholder="网站名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="linkUrl" class="col-sm-3 control-label">网站地址：</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="linkUrl" name="url" placeholder="网站地址">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="linkType" class="col-sm-3 control-label">链接类型：</label>

                        <div class="col-sm-3">
                            <select class="form-control" id='linkType' name="linktype">
                                {foreach $linkType as $key=>$value}
                                <option value="{$key}">{$value}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="linkTypeid" class="col-sm-3 control-label">所属分类：</label>

                        <div class="col-sm-3">
                            <select class="form-control" id="linkTypeid" name="typeid">
                                {foreach $linkGlass as $key=>$value}
                                <option value="{$key}">{$value}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="linkLogo" class="col-sm-3 control-label">网站logo：</label>

                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="linkLogo" placeholder="logo" name="logo">
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="btn btn-file" onclick="$('#resetLinkLogo').click()">上传图片</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="linkUsername" class="col-sm-3 control-label">网站联系人：</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="linkUsername" placeholder="网站联系人" name="username">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="introduce" class="col-sm-3 control-label">网站描述：</label>

                        <div class="col-sm-9">
                            <textarea class="form-control" rows="3" id="introduce" placeholder="网站描述 ..." name="introduce"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="linkPassed" class="col-sm-3 control-label">是否推荐：</label>

                        <div class="col-sm-3">
                            <select class="form-control" id="linkPassed" name="passed">
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="linkStatus" class="col-sm-3 control-label">链接状态：</label>

                        <div class="col-sm-3">
                            <select class="form-control" id="linkStatus" name="status">
                                <option value="">设置状态</option>
                                {foreach $linkStatus as $key=>$value}
                                <option value="{$key}">{$value}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </form>
                <input type="file" onchange="upLinkImg(this)" id="resetLinkLogo" style="display: none" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="savePosterSpace()">保存</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    /**
     * 显示编辑框
     * @returns {undefined}
     */
    function showEditModel() {
        fromReset('linkForm');
        $('#linkStatus').val(1);
        $("#linkModel").modal('show');
    }

    /**
     * 编辑链接
     */
    function editLink(info) {
        showEditModel();
        $('#linkId').val(info.id);
        $('#linkTitle').val(info.name);
        $('#linkUrl').val(info.url);
        $('#linkType').val(info.linktype);
        $('#linkTypeid').val(info.typeid);
        $('#linkLogo').val(info.logo);
        $('#linkUsername').val(info.username);
        $('#introduce').val(info.introduce);
        $('#linkPassed').val(info.passed);
        $('#linkStatus').val(info.status);
    }


    /**
     * 保存内容
     * @returns {Boolean}
     */
    function savePosterSpace() {
        var formData = $('#linkForm').serializeArray();
        var data = {};
        $.each(formData, function () {
            data[this.name] = this.value;
        });
        console.log(data);
        if (!data.name) {
            toast('提示', '网站名称不能为空', 1000);
            return false;
        }
        if (!data.url) {
            toast('提示', '网站地址不能为空', 1000);
            return false;
        }
        stbAjax('{:url("link/editlink")}', data, function (result) {
            //console.log(result);
            //$("#linkModel").modal('hide');
            toast('提示', result.msg, 1000);
            setTimeout('location.reload()', 500);
        });
    }
    
    /**
     * 上传图片
     * @param {type} fileInput
     * @returns {undefined}
     */
    function upLinkImg(fileInput) {
        var file = $(fileInput)[0].files[0];
        //console.log($(fileInput));
        ajaxFile(file, function (response) {
            console.log(response);
            if (response.code == 1) {
                $('#linkLogo').val(response.msg);
            } else {
                toast('图片上传失败', response.msg, 2000);
            }
        });
    }
</script>